<template>
	<view :style="{'height':minH}">
		<view class="info" :style="{'height':(winH-80)+'px'}">
			<mescroll-body ref="mescrollRef" :down="downOption" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">	
				<view class="item-list" v-for="(item,index) in list" :key="index">
					<view class="list-title">
						<view class="title">
							<text class="first-name">{{item.consignee}}</text>
							<text class="last-name">{{item.mobile}}</text>
							<text class="phone">{{item.zipcode}}</text>
						</view>
						<view class="icon close-icon" @click="handleDelete(item)">
							<image src="../../../static/images/icon/icon-close.svg" mode=""></image>
						</view>
					</view>
					<view class="list-title bottom-title">
						<view class="title">
							<text class="is-default" v-if="item.is_buy == 1">[默认]</text>{{item.address}}
						</view>
						<view class="icon" @click="handleUpdate(item)">
							<image src="../../../static/images/icon/icon-edit.svg" mode=""></image>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		
		<view class="info-btn">
			<view class="btn-box">
				<button type="default" @click="handleAdd()" class="wss-btn">添加新地址</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {getAddressList,deleteAddress} from '@/api/address.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	
	export default {
		mixins:[MescrollMixin],
		data() {
			return {
				emptyOption: {
					icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
					tip: '~ 收货地址为空 ~', // 提示
				},
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				upOption:{
					noMoreSize: 4, 
					empty:{
						tip: '~ 收货地址为空 ~',
						btnText: '去看看'
					}
				},
				searchParam: {},
				winH: 0,
				list: []
			}
		},
		onLoad(option) {
			this.initH();
		},
		computed: {
			minH: function(){
				return this.winH+"px"
			}
		},
		methods: {
			emptyClick(){
				uni.showToast({title: "点击了去逛逛"})
			},
			/*下拉刷新的回调 */
			downCallback() {
				//联网加载数据
				this.findList()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.searchParam.page = page.num
				this.searchParam.page_size = page.size
				this.findList(true)
			},
			initH () {
				let _self = this
				uni.getSystemInfo({
				    success: function (res) {
						_self.winH = res.windowHeight
						console.log(_self.winH)
				    }
				});
			},
			handleAdd() {
				uni.navigateTo({
					url:'/pages/user/address/add'
				})
			},
			findList(isUp) {
				let result = getAddressList({...this.searchParam,order_type:'desc',order_field:'uid'})
				result.then(res=>{
					if(res.code== 0) {
						let items = res.data.items || []
						this.mescroll.endSuccess();
						this.mescroll.endBySize(items.length || 0 , res.data.total_result || 0);
						if(isUp) {
							this.list = this.list.concat(items);
						} else {
							this.list = items
						}
					} else {
						this.list = []
					}
				}).catch(()=>{
					//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				})
			},
			handleUpdate(item) {
				uni.navigateTo({
					url:'/pages/user/address/add?uid='+item.uid
				})
			},
			handleDelete(item) {
				let _self = this
				uni.showModal({
				    title: '提示',
				    content: '确认删除这个地址吗？',
				    success: function (res) {
				        if (res.confirm) {
							deleteAddress({uid:item.uid}).then(r=>{
								if(r.code == 0) {
									// 提示错误
									uni.showToast({
										icon: "success",
										title: "删除成功"
									})
									_self.mescroll.onPullDownRefresh()
								}
							})
				        }
				    }
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.info {
		padding-bottom: 120rpx;
		overflow-y: auto;
		background-color: #ffffff;
		.item-list {
			padding: 40rpx;
			border-bottom: 3rpx solid $uni-border-color;
			.list-title {
				display: flex;
				justify-content: space-between;
				.title {
					display: inline-block;
				    white-space: nowrap; 
				    width: 100%; 
				    overflow: hidden;
				    text-overflow:ellipsis;
					.first-name,.last-name {
						font-weight: 550;
						margin-right: 10rpx;
					}
					
					.phone {
						margin-left: 20rpx;
						font-size: 28rpx;
						color: #333;
					}
				}
				.icon {
					image {
						width: 48rpx;
						height: 48rpx;
					}
				}
				.close-icon {
					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
			}
			.bottom-title {
				margin-top: 20rpx;
				font-size: 32rpx;
				.is-default {
					margin-right: 10rpx;
				}
			}
		}
	}
	.info-btn {
		position: absolute;
		bottom: 0;
		width: 100%;
		background-color: #ffffff;
		.btn-box {
			padding: 20rpx 40rpx;
			button {
				width: 100%;
				background-color: black;
				color: #ffff;
				font-size: 30rpx;
			}
		}
	}
</style>
